<template>
  <div class="settings-page">
    <a-row :gutter="16">
      <!-- 左侧菜单 -->
      <a-col :span="6">
        <a-card :bordered="false">
          <a-menu
            v-model:selectedKeys="selectedKeys"
            mode="inline"
            @select="handleSelect"
          >
            <a-menu-item key="basic">
              <template #icon>
                <setting-outlined />
              </template>
              基本设置
            </a-menu-item>
            <a-menu-item key="security">
              <template #icon>
                <safety-outlined />
              </template>
              安全设置
            </a-menu-item>
            <a-menu-item key="storage">
              <template #icon>
                <cloud-outlined />
              </template>
              存储配置
            </a-menu-item>
            <a-menu-item key="sms">
              <template #icon>
                <message-outlined />
              </template>
              短信配置
            </a-menu-item>
            <a-menu-item key="map">
              <template #icon>
                <environment-outlined />
              </template>
              地图配置
            </a-menu-item>
            <a-menu-item key="ocr">
              <template #icon>
                <scan-outlined />
              </template>
              OCR配置
            </a-menu-item>
          </a-menu>
        </a-card>
      </a-col>

      <!-- 右侧内容 -->
      <a-col :span="18">
        <a-card :bordered="false">
          <router-view></router-view>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  SettingOutlined,
  SafetyOutlined,
  CloudOutlined,
  MessageOutlined,
  EnvironmentOutlined,
  ScanOutlined
} from '@ant-design/icons-vue'

const router = useRouter()
const selectedKeys = ref(['basic'])

const handleSelect = ({ key }: { key: string }) => {
  selectedKeys.value = [key]
  switch (key) {
    case 'basic':
      router.push('/settings')
      break
    case 'security':
      router.push('/settings/security')
      break
    case 'storage':
      router.push('/settings/storage')
      break
    case 'sms':
      router.push('/settings/sms')
      break
    case 'map':
      router.push('/settings/map')
      break
    case 'ocr':
      router.push('/settings/ocr')
      break
  }
}
</script>

<style scoped>
.settings-page {
  padding: 24px;
}
</style>